<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="120px">
            <el-form-item label="操作人" prop="opName">
                <el-input v-model="queryParams.opName" placeholder="请输入操作人" clearable />
            </el-form-item>

            <el-form-item label="事件类型" prop="eventType">
                <el-select v-model="queryParams.eventType" placeholder="请选择事件类型" clearable>
                    <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作日期" prop="time">
                <el-date-picker v-model="queryParams.time" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="tableRef" v-loading="loading" :data="dataList" stripe>
            <el-table-column label="事件类型" align="center" prop="eventType">
                <template #default="scope">
                    <span v-if="scope.row.eventType =='0'">普通业务事件</span>
                    <span v-else-if="scope.row.eventType =='6'">用户违规行为</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" prop="logMemo" />
            <el-table-column label="操作人" align="center" prop="opName" />
            <el-table-column label="操作人IP" align="center" prop="opIp" />
            <el-table-column label="操作日期" align="center">
                <template #default="scope">
                  {{ formatDate(scope.row.opTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作结果" align="center">
                <template #default="scope">
                    <span v-if="scope.row.opResult =='success'">成功</span>
                    <span v-else>失败</span>
                </template>
            </el-table-column>
            <el-table-column label="系统编号" align="center" prop="sysId" />
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.currentPage" v-model:limit="queryParams.pageSize"
            @pagination="getList" />
    </div>
</template>

<script setup name="logManage">
import { getAllList } from "@/api/iconModle/logManage.js"
import {formatDate} from "@/utils/index.js"
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const option = ref([{ label: '普通业务事件', value: '0' }, { label: '用户违规行为', value: '6' }])

const data = reactive({
    queryParams: {
        currentPage: 1,
        pageSize: 10,
        opName: undefined,
        eventType: undefined,
        time: undefined,
    },
})
const { queryParams, } = toRefs(data)

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.currentPage = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    dataList.value = [];
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 查询数据列表 */
function getList() {
    loading.value = true;
    getAllList({ ...queryParams.value, opBeginDate: queryParams.value.time ? queryParams.value.time[0] : undefined, opEndDate: queryParams.value.time ? queryParams.value.time[1] : undefined }).then(response => {
        dataList.value = response.data.rows ? response.data.rows : [];
        total.value = response.data.total;
        loading.value = false;
    });
}

getList();
</script>

<style lang="scss" scoped></style>